import React, { useEffect } from "react";
import echarts from "echarts/lib/echarts";
import "echarts/lib/component/title";
import "echarts/lib/component/tooltip";
import "echarts/lib/component/grid";
import "echarts/lib/component/legend";
import "echarts/lib/chart/bar";
import "echarts/lib/chart/line";
import "echarts/lib/component/dataZoom";

const Bar = props => {
  let xData = (function() {
    var data = [];
    for (var i = 1; i < 15; i++) {
      data.push(i + "");
    }
    return data;
  })();
  function initChart() {
    // 初始化
    var myChart = echarts.init(document.getElementById("j_bar"));
    // 绘制图表
    myChart.setOption({
      backgroundColor: "#192c3e",
      title: {
        x: "4%",
        top: "2%",
        text: "充值客单分析",
        textStyle: {
          color: "#fff",
          fontSize: "20"
        }
      },
      tooltip: {
        trigger: "axis",
        axisPointer: {
          type: "shadow",
          textStyle: {
            color: "#fff"
          }
        }
      },
      grid: {
        borderWidth: 0,
        top: 110,
        bottom: 95,
        textStyle: {
          color: "#fff"
        }
      },
      legend: {
        x: "4%",
        top: "11%",
        textStyle: {
          color: "#90979c"
        },
        data: ["老用户", "新用户", "总"]
      },
      calculable: true,
      xAxis: [
        {
          type: "category",
          axisLine: {
            lineStyle: {
              color: "#90979c"
            }
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitArea: {
            show: false
          },
          axisLabel: {
            interval: 0
          },
          data: xData
        }
      ],
      yAxis: [
        {
          type: "value",
          splitLine: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#90979c"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            interval: 0
          },
          splitArea: {
            show: false
          }
        }
      ],
      dataZoom: [
        {
          show: true,
          height: 20,
          xAxisIndex: [0],
          bottom: 30,
          start: 10,
          end: 80,
          handleIcon:
            "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
          handleSize: "110%",
          handleStyle: {
            color: "#d3dee5"
          },
          textStyle: {
            color: "#fff"
          },
          borderColor: "#90979c"
        },
        {
          type: "slider", // inside:鼠标滑轮可滚动控制（缩放）
          show: false,
          height: 15,
          start: 1,
          end: 35
        }
      ],
      series: [
        {
          name: "老用户",
          type: "bar",
          stack: "总量",
          barMaxWidth: 35,
          barGap: "10%",
          itemStyle: {
            normal: {
              color: "rgba(255,144,128,1)",
              label: {
                show: true,
                textStyle: {
                  color: "#fff"
                },
                position: "insideTop",
                formatter: function(p) {
                  return p.value > 0 ? p.value : "";
                }
              }
            }
          },
          data: [
            198.66,
            330.81,
            151.95,
            160.12,
            222.56,
            229.05,
            128.53,
            250.91,
            224.47,
            473.99,
            126.85,
            260.5
          ]
        },

        {
          name: "新用户",
          type: "bar",
          stack: "总量",
          itemStyle: {
            normal: {
              color: "rgba(0,191,183,1)",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                formatter: function(p) {
                  return p.value > 0 ? p.value : "";
                }
              }
            }
          },
          data: [
            82.89,
            67.54,
            62.07,
            59.43,
            67.02,
            67.09,
            35.66,
            71.78,
            81.61,
            78.85,
            79.12,
            72.3
          ]
        },
        {
          name: "总",
          type: "line",
          stack: "总量",
          symbolSize: 20,
          symbol: "circle",
          itemStyle: {
            normal: {
              color: "rgba(252,230,48,1)",
              barBorderRadius: 0,
              label: {
                show: true,
                position: "top",
                formatter: function(p) {
                  return p.value > 0 ? p.value : "";
                }
              }
            }
          },
          data: [
            281.55,
            398.35,
            214.02,
            219.55,
            289.57,
            296.14,
            164.18,
            322.69,
            306.08,
            552.84,
            205.97,
            332.79
          ]
        }
      ]
    });

    // window.onresize = myChart.resize;
    window.addEventListener("resize", function() {
      myChart.resize();
    });
  }
  useEffect(() => {
    initChart();
  }, []);
  return <div id="j_bar" style={{ width: "100%", height: 400 }}></div>;
};

export default Bar;
